<template>
	<div class="u-page">
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-flex aui-choice-white" style="padding: 30rpx 30rpx 0 30rpx;">
					<div class="aui-flex-box">
						<h1>{{form.Subject}}</h1>
					</div>
				</div>
				<div class="aui-flex aui-flex-default aui-mar15 margin-30" @click="toTaskDetail">
					<div class="aui-flex-goods">
						<img :src="form.Pictures.split(',')[0]" alt="">
					</div>
					<div class="aui-flex-box">
						<div class="aui-flex aui-flex-clear">
							<div class="aui-flex-box">报酬：{{form.Salary}}</div>
						</div>
						<div class="aui-tag" v-for="(item, index) in form.KeyWord.split(',')">
							<u-tag :text="item" mode="dark" size="mini" bg-color="#7688e8"></u-tag>
						</div>
					</div>
				</div>
				<div class="aui-flex">
					<div class="aui-flex-box flex-between">
						<h1>技能与项目经验</h1>
					</div>
				</div>

				<div class="text-block" v-if="ReadOnly">
					<text user-select='true'>{{form.RecruitResults}}</text>
				</div>

				<div class="textarea-block" v-else>
					<u-input type="textarea" placeholder="请告诉我们您的技能和项目经验，您也可以添加附件" maxlength="500" height="240"
						:disabled="ReadOnly" :autoHeight="false" v-model="form.RecruitResults"></u-input>
				</div>

				<div class="aui-flex">
					<div class="aui-flex-box">
						<h1>上传附件</h1>
					</div>
				</div>
				<div class="aui-file">
					<Upload u_appid="Recruit3" :u_fieldName="form.Partnerid" :u_orunid="form.docUnid" u_type="3"
						:u_readonly="false" :u_initialAttchments="ResumeFiles" @receiveAttachmentsData="getData">
					</Upload>
				</div>

				<div class="divHeight"></div>

				<div class="aui-pay-com" @click="Submit" v-if="!ReadOnly">
					<button>提交</button>
				</div>
			</section>
		</section>
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				form: {
					docUnid: '', // 子文档id
					RecruitResults: '', // 技能和项目经验(图文)
				},
				ResumeFiles: [],
				ReadOnly: false, //是否只读（查看成果）
				Partnerid: '', // 参与者id
			}
		},

		onShow() {
			this.getFiles(this.form.docUnid)
		},

		onLoad(options) {

			// 未登录跳转到登录页面
			var loginRes = this.checkLogin();
			if (!loginRes) {
				return false;
			}

			// 是否只读
			if (this.isNotNull(options.ReadOnly)) {
				if (options.ReadOnly == '1') {
					this.ReadOnly = true
				}
			}

			// 拍档id
			if (this.isNotNull(options.Partnerid)) {
				this.Partnerid = options.Partnerid
			} else {
				this.Partnerid = uni.getStorageSync('userInfo').userId
			}

			// 文档id
			if (this.isNotNull(options.docUnid)) {
				this.form.docUnid = options.docUnid
				this.getRecruitDetails()
				this.getFiles(this.form.docUnid)
			}

		},

		methods: {
			/**
			 * 获取任务详情
			 */
			async getRecruitDetails() {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Recruit3',
					wf_num: 'R_Recruit3_BL005',
					docUnid: this.form.docUnid,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.form = result.data
					this.form.docUnid = this.form.WF_OrUnid
				}
			},

			/**
			 * 提交推广简历
			 */
			async Submit() {
				if (!this.isNotNull(this.form.RecruitResults)) {
					this.showMSG('none', '技能与项目经验不能为空哦！')
					return
				}
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Recruit3',
					wf_num: 'R_Recruit3_BL006',
					docUnid: this.form.docUnid,
					RecruitResults: this.form.RecruitResults,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					uni.reLaunch({
						url: '/pages_private_scene2/Recruit3/common/result?mode=3&Subject=' + this.form
							.Subject + '&InspectorName=' + this.form.InspectorName
					})
				} else {
					this.showMSG('error', '出错啦！')
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},

			/**
			 * 跳转到任务详情
			 */
			toTaskDetail() {
				this.$u.route('/pages_private_scene2/Recruit3/SignUp?docUnid=' + this.form.MainDocUnid)
			},

			/**
			 * 接收上传组件传过来的值并更新附件列表数据
			 */
			async getData(res) {
				this.ResumeFiles = res;
			},

			/**
			 * 初始化附件列表
			 * @param {Object} orunid 实例id
			 */
			async getFiles(orunid) {
				if (this.isNotNull(orunid) && this.isNotNull(this.Partnerid)) {
					const userInfo = uni.getStorageSync('userInfo')
					let result = await this.$u.api.unifyRequest({
						userId: userInfo.userId,
						nickName: userInfo.nickName,
						appid: 'FILE',
						wf_num: 'R_FILE_BL002',
						orunid: orunid,
						fieldName: this.Partnerid,
						loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						this.ResumeFiles = result.data
					}
				}
			},
		}
	}
</script>

<style scoped>
	html,
	body {
		color: #333;
		margin: 0;
		height: 100%;
		font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-weight: normal;
	}

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	a,
	label,
	button,
	input,
	select {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	img {
		width: 100%;
		height: auto;
		display: block;
		border: 0;
	}

	body {
		background: #fff;
		color: #666;
	}

	html,
	body,
	div,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	button,
	fieldset,
	form,
	input,
	legend,
	textarea,
	th,
	td {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
		color: #08acee;
	}

	button {
		outline: 0;
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		margin: 0;
		font: inherit;
		color: inherit;
		outline: none;
	}

	li {
		list-style: none;
	}

	a {
		color: #666;
	}

	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.clearfix {}

	.divHeight {
		width: 100%;
		height: 10px;
		background: #f5f7fc;
		position: relative;
		overflow: hidden;
	}

	.r-line {
		position: relative;
	}

	.r-line:after {
		content: '';
		position: absolute;
		z-index: 0;
		top: 0;
		right: 0;
		height: 100%;
		border-right: 1px solid #D9D9D9;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
		-webkit-transform-origin: 100% 0;
		transform-origin: 100% 0;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-arrow {
		position: relative;
		padding-right: 0.8rem;
		color: #7f8699;
		font-size: 0.85rem;
	}

	.aui-arrow span {
		font-size: 0.8rem;
		color: #9b9b9b;
	}

	.aui-arrow:after {
		content: " ";
		display: inline-block;
		height: 6px;
		width: 6px;
		border-width: 2px 2px 0 0;
		border-color: #848484;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -6px;
		right: 2px;
		border-radius: 1px;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		padding-bottom: 10px;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 102;
		background: #fff;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 20%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 15%;
		-ms-flex: 0 0 15%;
		flex: 0 0 15%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #808080;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		font-size: 12px;
		color: #4e85fd;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 80%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 1rem;
		color: #333;
	}

	.icon {
		width: 19px;
		height: 19px;
		display: block;
		border: none;
		float: left;
		background-size: 19px;
		background-repeat: no-repeat;
	}

	.aui-flex-box h1 {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position: relative;
		padding-left: 1rem;
	}

	.aui-flex-box h2 {
		color: #222;
		font-weight: normal;
		font-size: 1.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		padding-left: 1rem;
	}

	.aui-flex-box p {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		margin-bottom: 0.1rem;
		color: #ffffffc4;
	}

	.aui-flex-box h3 {
		font-size: 0.7rem;
		color: #ffffffc4;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}

	.aui-flex-box h4 {
		font-size: 0.7rem;
		color: #ffffffc4;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}

	.aui-flex-box h5 {
		font-size: 0.8rem;
		color: #ffffff;
		font-weight: normal;
		width: 100%;
		overflow: hidden;
	}

	.aui-palace {
		padding: 0.6rem 0;
		position: relative;
		overflow: hidden;
		background: white;
	}

	.aui-palace-grid {
		position: relative;
		float: left;
		padding: 1px;
		width: 33.333%;
		box-sizing: border-box;
		margin: 10px 0;
	}

	.aui-palace-img {
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}

	.aui-palace-text p {
		text-align: center;
		font-size: 14px;
		color: #333333;
		margin-top: 5px;
	}


	.aui-current-item {
		width: 29%;
		float: left;
		margin: 2%;
		text-align: center;
		border-radius: 100px;
		background: #ededed;
		padding: 8px 0;
		font-size: 14px;
	}

	.this-card {
		background: #16d7da;
		color: #fff;
	}


	.aui-list-box {
		padding: 0 10px;
	}


	.aui-flex-box h1:after {
		content: '';
		position: absolute;
		z-index: 0;
		top: 3px;
		left: 0;
		width: 4px;
		height: 16px;
		border-radius: 10px;
		background: #16d7da;
	}

	.text-block {
		background: #ededed;
		width: 92%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
		user-select: text !important;
		-webkit-user-select: text;
		overflow: scroll;
	}

	.textarea-block {
		background: #ededed;
		width: 92%;
		margin: 0 auto;
		border-radius: 5px;
		padding: 20rpx;
		height: 11.5rem;
		user-select: text !important;
		-webkit-user-select: text;
	}

	.textarea-block textarea {
		width: 100%;
		padding: 1rem;
		font-size: 0.95rem;
		overflow: hidden;
		resize: none;
		height: 8rem;
		border: none;
		background: none;
		line-height: 1.8;
	}

	.aui-textarea-count {
		text-align: right;
		padding-right: 1rem;
	}

	.aui-upload-box {
		background-color: #fff;
		/* padding: .1rem 1rem 0.5rem 0.4rem; */
		width: 210rpx;
		height: 210rpx;
		padding-top: 10rpx;
		padding-right: 10rpx;
	}


	#chose_pic_btn {
		width: 210rpx;
		height: 210rpx;
		position: relative;
		display: inline-block;
		background-image: url('');
		box-sizing: border-box;
		background-size: 45px 45px;
		background-position: center center;
		background-repeat: no-repeat;
		background-color: #ededed;
		margin-left: 3.3333%;
		margin-bottom: 12px;
		border-radius: 5px;
	}

	#chose_pic_btn input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		height: 100%
	}



	.aui-upload-box .pic_look {
		width: 30%;
		height: 100px;
		display: inline-block;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		box-sizing: border-box;
		margin-left: 3.3333%;
		margin-bottom: 12px;
		position: relative;
		border-radius: 5px;
	}

	.aui-upload-box .pic_look em {
		position: absolute;
		display: inline-block;
		width: 20px;
		height: 20px;
		background-color: #fff;
		color: #fff;
		font-size: 18px;
		right: -0.5rem;
		top: -0.5rem;
		text-align: center;
		line-height: 22px;
		border-radius: 50%;
		font-weight: 700;
		z-index: 1;
		background-image: url('');
		background-size: 20px;
	}



	#chose_pic_btn input {
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 100%;
		height: 100%
	}

	.title_phone {
		color: #444444;
		font-weight: 500;
		font-size: 1rem;
		overflow: hidden;
		position: relative;
	}

	.aui-pay-com {
		width: 92%;
		margin: 0.5rem auto 0;
	}

	.aui-pay-com button {
		background-color: #16d7da;
		color: white;
		border: none;
		width: 100%;
		padding: 12px 0;
		border-radius: 5px;
		font-size: 16px;
	}

	.aui-choice-white {
		background: #fff;
	}

	.aui-order-box {
		padding: 10px 20px;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-clear {
		padding: 0;
		/* margin-top: 20px; */
		margin-bottom: 10px;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.aui-mar15 {
		margin-bottom: 15px;
	}

	.aui-flex-default {
		background: #f3f1f1;
	}

	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}

	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}

	.margin-30 {
		margin: 30rpx;
	}

	img {
		height: 160rpx;
	}

	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		width: 95%;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}

	.Tips {
		font-size: 24rpx;
		line-height: 24rpx;
		margin-top: 12rpx;
		color: #9a9a9a;
		padding: 30rpx;
		margin: 0;
		word-break: break-all;
		-webkit-overflow-scrolling: touch;
		-webkit-tap-highlight-color: transparent;
		text-size-adjust: 100%;
		box-sizing: border-box;
	}

	.flex-between {
		display: flex;
		justify-content: space-between;
	}

	.Tmp-Remark {
		width: 93%;
		margin: 0 auto;
	}

	.aui-tag {
		display: inline
	}

	.aui-file {
		margin-bottom: 10px;
	}
</style>
